<template>
  <div class="publicCard">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加对公账户</span>
        <el-button
          style="float: right"
          type="primary"
          @click="$router.push('/card/cardManger')"
          >返回</el-button
        >
      </div>
      <div class="box">
        <div class="pic">
          <!-- 身份证正面 -->
          <div class="pic_item freePic1">
            <el-upload
              ref="upload1"
              :uploadFiles="fileDataList1"
              :multiple="true"
              action="https://system.ori-iot.com/meter"
              list-type="picture-card"
              :limit="1"
              :on-change="handleChange1"
              :auto-upload="false"
              :class="{ hide1: hideUpload1 }"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove1(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <span style="margin-top: 5px">身份证正面</span>
          </div>
          <!-- 身份证反面 -->
          <div class="pic_item freePic2">
            <el-upload
              ref="upload2"
              :uploadFiles="fileDataList2"
              :multiple="true"
              action="https://system.ori-iot.com/meter"
              list-type="picture-card"
              :limit="1"
              :on-change="handleChange2"
              :auto-upload="false"
              :class="{ hide2: hideUpload2 }"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove2(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <span style="margin-top: 5px">身份证反面</span>
          </div>
          <!-- 营业执照 -->
          <div class="pic_item freePic3">
            <el-upload
              ref="upload3"
              :uploadFiles="fileDataList3"
              :multiple="true"
              action="https://system.ori-iot.com/meter"
              list-type="picture-card"
              :limit="1"
              :on-change="handleChange3"
              :auto-upload="false"
              :class="{ hide3: hideUpload3 }"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove3(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <span style="margin-top: 5px">营业执照</span>
          </div>
        </div>
        <div class="item" style="margin: 2% 0">
          <el-form label-width="100px" :model="addForm">
            <el-form-item label="法人姓名">
              <el-input clearable v-model="name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码">
              <el-input clearable v-model="cardId"></el-input>
            </el-form-item>
            <el-form-item label="身份证有效期">
              <el-select
                @change="idChange"
                v-model="idSelect"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in idOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input clearable v-model="phone"> ></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
              <el-input clearable v-model="company"> ></el-input>
            </el-form-item>
            <el-form-item label="证件有效期">
              <el-select
                @change="idChange2"
                v-model="idSelect2"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in idOptions2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="社会信用代码">
              <el-input clearable v-model="code"> ></el-input>
            </el-form-item>
            <el-form-item label="经营范围">
              <el-input :title="rang" clearable v-model="rang"> ></el-input>
            </el-form-item>
            <el-form-item label="企业所在地">
              <el-cascader
                :title="address"
                :props="props"
                v-model="address"
                :options="options"
                @change="addressChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input :title="addressMore" clearable v-model="addressMore">
                ></el-input
              >
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input clearable v-model="card"> ></el-input>
            </el-form-item>
            <el-form-item label="所属银行">
              <el-autocomplete
                :title="bankValue"
                class="inline-input"
                value-key="bankName"
                v-model="bankValue"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="codeP" placeholder="请输入短信验证码">
                <template slot="append">
                  <el-button
                    :disabled="disabled"
                    @click="getCode"
                    type="primary"
                    >{{ text }}</el-button
                  ></template
                >
              </el-input>
            </el-form-item>
          </el-form>
          <el-dialog title="预览" :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
          <!-- 身份证有效期 -->
          <el-dialog title="身份证有效期" :visible.sync="dialogVisibleId">
            <el-date-picker
              clearable
              @change="changeTime"
              value-format="yyyyMMdd"
              v-model="value"
              placeholder="选择日期时间"
            >
            </el-date-picker>
            <span slot="footer" class="dialog-footer">
              <el-button
                @click="
                  dialogVisibleId = false;
                  idSelect = '';
                  value = '';
                "
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  dialogVisibleId = false;
                  idSelect = value;
                "
                >确 认</el-button
              >
            </span>
          </el-dialog>
          <!-- 证件有效期 -->
          <el-dialog title="营业执照有效期" :visible.sync="dialogVisibleId2">
            <el-date-picker
              clearable
              @change="changeTime2"
              value-format="yyyyMMdd"
              v-model="value2"
              placeholder="选择日期时间"
            >
            </el-date-picker>
            <span slot="footer" class="dialog-footer">
              <el-button
                @click="
                  dialogVisibleId2 = false;
                  idSelect2 = '';
                  value2 = '';
                "
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  dialogVisibleId2 = false;
                  idSelect2 = value2;
                "
                >确 认</el-button
              >
            </span>
          </el-dialog>
        </div>
        <div class="btn" style="padding-right: 8%">
          <el-button
            :disabled="
              name &&
              cardId &&
              phone &&
              company &&
              code &&
              rang &&
              addressMore &&
              address &&
              bankValue &&
              fileDataList1.length !== 0 &&
              fileDataList2.length !== 0 &&
              fileDataList3.length !== 0 &&
              idSelect &&
              idSelect2 &&
              codeP &&
              card
                ? false
                : true
            "
            style="float: right"
            type="primary"
            @click="bind"
            >立即绑定</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import address from "../../utils/address.json";
import { getBankApi, bindPublicApi, getBindCodeApi } from "../../api/card";
export default {
  data() {
    return {
      disabled: false,
      text: "获取短信验证码",
      codeP: "",
      name: "",
      cardId: "",
      phone: "",
      company: "",
      code: "",
      rang: "",
      addressMore: "",
      card: "",
      bankValue: "",
      bankCode: "",
      address: "",
      idSelect: "",
      idSelect2: "",
      fileDataList1: [],
      fileDataList2: [],
      fileDataList3: [],
      bankOptions: "",
      props: {
        children: "cities",
        value: "value",
        label: "title",
      },
      options: address,
      value: "",
      value2: "",
      idOptions: [
        {
          label: "长期",
          value: "20991231",
        },
        {
          label: "非长期",
          value: "1",
        },
      ],
      idOptions2: [
        {
          label: "长期",
          value: "20991231",
        },
        {
          label: "非长期",
          value: "1",
        },
      ],
      dialogVisibleId: false,
      dialogVisibleId2: false,
      dialogImageUrl: "",
      dialogVisible: false,
      hideUpload1: false,
      hideUpload2: false,
      hideUpload3: false,
      addForm: {},
      time: null,
      disabled: false,
    };
  },
  methods: {
    getCode() {
      console.log("1");
    },
    bind() {
      let loading = this.$loading({
        lock: true,
        text: "发送中...",
      });
      let formData = new FormData();
      formData.append("certFrontalPicture", this.fileDataList1[0].raw); //正面照
      formData.append("certFrontalAddress", this.fileDataList1[0].url); //正面照地址
      formData.append("certReversePicture", this.fileDataList2[0].raw); //反面照
      formData.append("certReverseAddress", this.fileDataList2[0].url); //反面照地址
      formData.append("businessLicensePicture", this.fileDataList3[0].raw); //营业执照
      formData.append("businessLicenseAddress", this.fileDataList3[0].url); //营业执照地址
      formData.append("address", this.addressMore); //详细地址
      formData.append("areaCode", this.address[1]); //地区编码
      formData.append("bankCode", this.bankCode); //银行代码
      formData.append("bankName", this.bankValue); //银行名称
      formData.append("businessScope", this.rang); //经营范围
      formData.append("cardNo", this.card); //银行账号
      formData.append("code", this.codeP); //验证码
      formData.append("legalMp", this.phone); //手机号
      formData.append("legalCertId", this.cardId); //身份证
      formData.append("legalCertIdExpires", this.idSelect); //身份证到期时间
      formData.append(
        "legalMpNoExpire",
        this.idSelect == "20991231" ? "1" : "0"
      ); //是否长期
      formData.append("legalPerson", this.name); //姓名
      formData.append("name", this.company); //企业名称
      formData.append("provCode", this.address[0]); //省份编码
      formData.append("socialCreditCode", this.code); //社会信用代码
      formData.append("socialCreditCodeExpires", this.idSelect2); //有效期
      formData.append(
        "socialCreditCodeNoExpire",
        this.idSelect2 == "20991231" ? "1" : "0"
      ); //是否长期
      bindPublicApi(formData)
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.$message.success("绑定成功!");
            clearInterval(this.time);
            this.$router.push("/card/cardManger");
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    // 获取验证码
    getCode() {
      let loading = this.$loading({
        lock: true,
        text: "发送中...",
      });
      getBindCodeApi()
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.$message.success("发送成功!");
            this.disabled = true;
            let num = 60;
            this.time = setInterval(() => {
              if (num > 0) {
                num = num - 1;
                this.text = `${num}s后重新获取`;
              } else {
                this.disabled = false;
                this.text = "重新获取";
                clearInterval(this.time);
              }
            }, 1000);
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    handleSelect(e) {
      this.bankCode = e.bankCode;
    },
    querySearch(e, d) {
      getBankApi(1, 6000, e).then((res) => {
        if (res.code == 200) {
          d(res.data.rows);
        }
      });
    },
    addressChange(e) {
      console.log(e);
    },
    changeTime(e) {
      this.idSelect = e;
    },
    changeTime2(e) {
      this.idSelect2 = e;
    },
    idChange(e) {
      if (e == 1) {
        this.dialogVisibleId = true;
      }
    },
    idChange2(e) {
      if (e == 1) {
        this.dialogVisibleId2 = true;
      }
    },
    handleRemove1(file) {
      const uploadFiles = this.$refs.upload1.uploadFiles;
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] === file.url) {
          uploadFiles.splice(i, 1);
        }
      }
      this.hideUpload1 = false;
    },
    handleRemove2(file) {
      const uploadFiles = this.$refs.upload2.uploadFiles;
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] === file.url) {
          uploadFiles.splice(i, 1);
        }
      }
      this.hideUpload2 = false;
    },
    handleRemove3(file) {
      const uploadFiles = this.$refs.upload3.uploadFiles;
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] === file.url) {
          uploadFiles.splice(i, 1);
        }
        this.hideUpload3 = false;
      }
    },
    handleChange1(file, list) {
      if (list.length == 1) {
        this.hideUpload1 = true;
      }
      this.fileDataList1 = list;
      console.log(this.fileDataList1);
    },
    handleChange2(file, list) {
      if (list.length == 1) {
        this.hideUpload2 = true;
        this.fileDataList2 = list;
      }
    },
    handleChange3(file, list) {
      if (list.length == 1) {
        this.hideUpload3 = true;
        this.fileDataList3 = list;
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss">
.publicCard {
  width: 100%;
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);
  .el-card {
    height: 95%;
    .el-card__body {
      height: 90%;
      overflow: auto;
      .box {
        width: 100%;
        height: 100%;
        .pic {
          // height: 20%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .pic_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            // el-upload 修改修改样式
            .el-upload--picture-card {
              width: 100px;
              height: 100px;
              line-height: 100px;
              // background-color: #409eff;
              // border: 1px dashed #409eff;
              img {
                width: 100px;
                height: 100px;
              }
            }
          }
        }
      }
    }
  }
  .el-form {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
      width: 30%;
    }
  }

  .freePic1 .hide1 .el-upload--picture-card {
    display: none;
  }
  .freePic2 .hide2 .el-upload--picture-card {
    display: none;
  }
  .freePic3 .hide3 .el-upload--picture-card {
    display: none;
  }
}
</style>